<template>
	<div class="loadmore-page">
		<view-box class="load-box">
			<scroller
				ref="scroller"
				:on-refresh="evt_refresh"
				:on-infinite="evt_loadMore"
				refresh-layer-color="#4b8bf4"
				refreshText="拉一拉"
				noDataText="木有更多了"
			>
				<spinner type="lines" slot="refresh-spinner" style="stroke: #4b8bf4;"></spinner>
				<ul v-if="list.length">
					<li v-for="(item, idx) in list" :key="idx">{{item}}</li>
				</ul>
			</scroller>
		</view-box>
	</div>
</template>
<style type="text/css">
	.loadmore-page {
		position: relative;
		height: 150px;
	}
	.load-box {
		background-color: #ccc;
	}
</style>
<script type="text/javascript">
	import Vue from 'vue'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	import { ViewBox, Spinner } from 'vux'

	export default {
		name: 'demo-loadmore',
		data: () => {
			return {
				list: []
			}
		},
		methods: {
			evt_refresh() {
				console.log('pull refresh');
				let rand = Math.random();
				setTimeout(() => {
					if (rand <= .5) {
						this.list = [1,2,3, ...this.list];
					}
					this.$refs.scroller.finishPullToRefresh();
				}, 500);
			},
			evt_loadMore() {
				console.log('loadmore');
				let rand = Math.random();
				setTimeout(() => {
					if (rand <= .2) {
						this.$refs.scroller.finishInfinite(true);
					} else {
						this.$refs.scroller.finishInfinite();
						this.list = [...this.list, 1,2,3];
					}
				}, 500);
			}
		},
		components: {
			ViewBox,
			Spinner
		}
	}
</script>